<template>
    <!-- 页首图 -->
    <TopView :search="false"
    :title="state.documentHome.topView.title"
    :image="state.documentHome.topView.image"
    placeholder=""
    />

    <!-- 第一模块 -->
    <TopicBlock
        :list="state.documentHome.firstTopics"
        :myStyle="state.documentHome.topicStyle[0]"
        :hasImage="true"
        :title="''"
    />
    <div class="w-full xl:px-32 px-5">
        <Hr />
    </div>

    <!-- 第二模块 -->
    <TopicBlock
        :list="state.documentHome.secondTopic.topics"
        :myStyle="state.documentHome.topicStyle[1]"
        :title="state.documentHome.secondTopic.title"
        :hasImage="false"
    />
    <div class="w-full xl:px-32 px-5">
        <Hr />
    </div>

    <!-- 第三模块 -->
    <TopicBlock
        :list="state.documentHome.thirdTopic.topics"
        :myStyle="state.documentHome.topicStyle[2]"
        :title="state.documentHome.secondTopic.title"
        :hasImage="true"
    />
    <div class="w-full xl:px-32 px-5">
        <Hr />
    </div>

    <!-- 第四模块 -->
    <TopicBlock
        :list="state.documentHome.lastTopic"
        :myStyle="state.documentHome.topicStyle[3]"
        :hasImage="true"
        :title="''"
    />
    <div class="w-full xl:px-32 px-5">
        <Hr />
    </div>

    <!-- 更多模块 -->
    <div class="w-full flex justify-center">
        <div class="w-3/5 flex flex-col justify-center items-center">
            <div class="text-2xl py-5">{{ state.documentHome.moreTopic.title }}</div>
            <div class="w-10 h-10 my-3 bg-document bg-cover bg-no-repeat"></div>
            <div class="text-sm text-link mb-5">{{ state.documentHome.moreTopic.linkText }}</div>
        </div>
    </div>
    <div class="w-full xl:px-32 px-5">
        <Hr />
    </div>

    <!-- 搜索模块 -->
    <div class="w-full h-264 overflow-hidden flex justify-center">
        <div class="w-3/5 flex flex-col justify-around items-center">
            <div class="text-2xl py-5">{{ state.documentHome.search.title }}</div>
            <SearchBar :placeHolder="state.documentHome.search.placeHolder" :hasResult="false"/>
        </div>
    </div>

    <!-- 页脚 -->
    <MyFooter :breadCurb="state.documentHome.breadCurb" />
</template>

<script lang="ts" setup>
import TopView from "@comps/topView.vue";
import Hr from "@comps/smallComs/hr.vue";
import SearchBar from "@comps/smallComs/searchBar.vue";
import MyFooter from "@comps/footer.vue";
import TopicBlock from "@comps/topicBlock.vue";
import { useRoute } from "vue-router"
import { state } from "@utils/store";
import { documentHomeData } from "@utils/utils";
const route = useRoute()

documentHomeData(route.path)



</script>


<style>
.thirdTopItem {
    flex: 50%;
}
</style>